<template>
    <u-scroll-list>
    	<view class="scroll-list">
    		<view
    			class="scroll-list__line"
    			v-for="(item, index) in menuArr"
    			:key="index"
    		>
    			<view
    				class="scroll-list__line__item"
    				v-for="(item1, index1) in item"
    				:key="index1"
    				:class="[(index1 === item.length - 1) && 'scroll-list__line__item--no-margin-right']"
					@tap="menuArrList(item1.id)"
    			>
    				<image
    					class="scroll-list__line__item__image"
    					:src="menuBaseUrl + item1.icon"
    					mode="widthFix"
    				></image>
    				<text class="scroll-list__line__item__text">{{ item1.name }}</text>
    			</view>
    		</view>
    	</view>
    </u-scroll-list>
</template>
<script>
export default {
	props:['menuArr'],
	data() {
		return {
			menuBaseUrl:'../../static'
		}
	},
	methods: {
		menuArrList(id){
			uni.reLaunch({
				url:'/pages/optimal/optimal?id='+id
			})
		}
	}
}
</script>

<style lang="scss">
	
.scroll-list {
	&__line {
		@include flex;
		// @include flex(2);
		margin-top: 10px;

		&__item {
			// margin-right: 15px;
			padding: 0 20rpx;

			&__image {
				width: 80rpx;
				height: 80rpx;
			}

			&__text {
				margin-top: 5px;
				font-size: 12px;
				text-align: center;
				display: block;
				white-space:nowrap
			}

			&--no-margin-right {
				margin-right: 0;
			}
		}
	}
}

</style>